<template>
  <!-- 放置一个图标 -->
  <div style="display:inline-block">
    <i class="el-icon-loading" @click="toggleScreen" />

  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullscreen: false
    }
  },
  created() {
  // ESC会改变当前的全屏状态
    // screenfull是插件，它自带事件监听 on
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenfull.on('change', () => {
    //   console.log('当前是否是全屏', screenfull.isFullscreen)
      this.isFullScreen = screenfull.isFullscreen
    })
  },
  methods: {
    toggleScreen() {
      screenfull.toggle()
      this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>

<style lang="scss" scoped>
    .el-icon-loading {
      color: #fff;
      margin: 5px;
      font-size: 30px;
    }
</style>
